<div class="radios">
    {#each list as {name},index}
        <div class="radio {selectIndex==index?'select':''}" on:click={()=>{select(index)}}>{name}</div>
    {/each}
</div>
<style>
.radios{
    display: flex;
    flex-flow: wrap;   
}
.radio{
    background: red;
    color: rgb(131, 131, 131);
    background: rgba(237, 237, 237, 0.753);
    border-radius: 0.5rem;
    margin: 0.5rem 0.5rem;
    padding: 1rem 1.5rem;
    box-sizing: border-box;
    font-size: 1.5rem;
}
.radio.select{
    background: rgb(199, 199, 199);
    color: rgb(43, 43, 43);
}

</style>
<script>
    import { createEventDispatcher } from 'svelte';
    const dispatch = createEventDispatcher();
    let selectIndex=null;
    export let list=[{name:"red"},{name:"pink"},{name:"blue"},{name:"green"},{name:"red"},{name:"pink"},{name:"blue"},{name:"green"}];
    function select(index){
        if(selectIndex==index){
            selectIndex=null
            dispatch("unselect",list[index])
        }else{
            selectIndex=index;
            dispatch("select",list[index])
        }
        
    }
    export function clear(){
        selectIndex=null
    }
</script>